<template>
  <div class="home-container">
    <el-card class="welcome-card">
      <template #header>
        <div class="card-header">
          <span>Vue3子应用</span>
        </div>
      </template>
      <div class="card-content">
        <p>这是Vue3子应用的主页，展示了以下功能：</p>
        <ul>
          <li>基于Vue3 + Vite的开发环境</li>
          <li>使用Element Plus组件库</li>
          <li>SCSS样式支持</li>
          <li>与主应用的状态同步</li>
        </ul>
        <div class="nav-buttons">
          <el-button type="primary" @click="$router.push('/counter')"
            >查看计数器示例</el-button
          >
          <el-button type="success" @click="$router.push('/about')"
            >关于页面</el-button
          >
        </div>
      </div>
    </el-card>

    <el-card class="message-card">
      <template #header>
        <div class="card-header">
          <span>主应用消息</span>
        </div>
      </template>
      <div class="card-content">
        <p>来自主应用的消息：{{ message }}</p>
        <el-button type="primary" @click="sendMessage"
          >发送消息到主应用</el-button
        >
      </div>
    </el-card>
  </div>
</template>

<script type="module" setup>
import { computed } from "vue";
import { useStore } from "vuex";

const store = useStore();
const message = computed(() => store.state.message);

const sendMessage = () => {
  store.dispatch(
    "sendMessageToMain",
    `来自Vue3子应用的消息：${new Date().toLocaleString()}`
  );
};
</script>

<style lang="scss" scoped>
.home-container {
  padding: 20px;
  .el-card {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .card-header {
    font-weight: bold;
  }
  .card-content {
    ul {
      margin: 15px 0;
      padding-left: 20px;
      li {
        line-height: 1.8;
      }
    }
    .nav-buttons {
      margin-top: 20px;
      .el-button {
        margin-right: 15px;
      }
    }
  }
  .message-card {
    .card-content {
      p {
        margin-bottom: 15px;
      }
    }
  }
}
</style>
